<template>
  <PageContainer>
    <view class="container">
      <Header title="添加其他人员" />
      <view style="padding-top: 30rpx; background-color: #fff">
        <BasicsForm @register="formRegister" @submit="onSubmit" />
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* addRetinue 添加随行人员 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm } from '@/components/Form';
  import { retinueAdd } from '@/api/activity';
  import { type RetinueAddData } from '@/api/activity/types';
  import { navigateBack, onLoad } from '@/router';
  import { Toast } from '@/utils';
import type { FunctionArgs } from '@vueuse/core';

  const [register] = useForm({
    labelAlign: 'left',
    validateTrigger: 'bind',
    btnGroupOptions: {
      submit: { text: '提交' },
    },
    schemas: [
      {
        field: 'name',
        label: '姓名',
        component: 'Input',
        required: true,
      },
      {
        field: 'phone',
        label: '手机号',
        component: 'InputPhone',
        required: true,
      },
      {
        field: 'companyName',
        label: '单位名称',
        component: 'Input',
        required: true,
      },
      {
        field: 'companyPositionName',
        label: '职务',
        component: 'Input',
        required: true,
      },

      {
        field: 'avatar',
        label: '头像',
        component: 'UploadImg',
        componentProps: {
          isCrop: true,
          cropOptions: {
            width: 640,
            height: 760,
          },
        },
      },
    ],
  });

  let callback!: FunctionArgs;
  onLoad<'AddRetinue'>((op) => {
    callback = op.callback;
  });

  function formRegister(event: any) {
    register(event);
  }

  function onSubmit(vals: RetinueAddData) {
    retinueAdd(vals).then((r) => {
      Toast('添加成功', 'success', 1500);
      callback?.();
      navigateBack();
    });
  }
</script>

<style lang="scss" scoped></style>
